<template>
  <div>
    <el-card class="permission-card" v-loading='loading'>
      <el-form :inline="true">
        <el-form-item label-width="180px" class="per-input" size="mini">
          <el-input v-model="query.username" placeholder="根据用户名搜索"></el-input>
        </el-form-item>
        <el-button size="small" @click="query.username=''">清除</el-button>
        <el-button type="primary" size="small" @click="getUserList">搜索</el-button>
        <el-button type="success" icon="el-icon-edit" size="small" style="float:right" @click="add">
          新增用户</el-button>
      </el-form>

      <el-alert style="margin-bottom:20px" :title='num' type="info" show-icon :closable="false">
      </el-alert>

      <el-table :data="UserList" style="width: 100%">
        <el-table-column align="center" prop="id" label="序号">
        </el-table-column>
        <el-table-column align="center" prop="email" label="邮箱">
        </el-table-column>
        <el-table-column align="center" prop="phone" label="联系电话">
        </el-table-column>
        <el-table-column align="center" prop="username" label="用户名">
        </el-table-column>
        <el-table-column align="center" prop="permission_group_title" label="权限组名称">
        </el-table-column>
        <el-table-column align="center" prop="role" label="角色">
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template v-slot='{row}'>
            <el-button type="primary" icon="el-icon-edit" circle size="small" @click="edit(row)" plain></el-button>
            <el-button type="danger" @click="del(row)" icon="el-icon-delete" circle size="small" plain
              v-if="row.id==2?false:true"></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination style="margin:20px 0px ; float: right;" background @size-change="handleSizeChange"
        @current-change="handleCurrentChange" :current-page="query.page" :page-sizes="[1, 5, 10]"
        :page-size="query.pagesize" layout=" prev, pager, next, sizes, jumper" :total="count">
      </el-pagination>

      <el-dialog title="创建用户" :visible.sync="addVisible" width="50%">
        <el-form class="addD" label-width="180px" :label-position="labelPosition" :rules="editRules" ref="addForm"
          :model="addinfo" style="
  width: 400px;
    margin-left: 120px;">

          <el-form-item label="用户名" prop="username">
            <el-input v-model="addinfo.username"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="addinfo.email"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="addinfo.password"></el-input>
          </el-form-item>
          <el-form-item label="角色">
            <el-input v-model="addinfo.role"></el-input>
          </el-form-item>
          <el-form-item label="权限组名称">
            <el-select v-model="per.title" placeholder="请选择活动区域">
              <el-option v-for="item in simpleList" :key="item.id" :label="item.title" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input v-model="addinfo.phone"></el-input>
          </el-form-item>
          <el-form-item label="介绍">
            <el-input type="textarea" :rows="2" v-model="addinfo.introduction"></el-input>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="Submitadd">立即创建</el-button>
          <el-button @click="addVisible=false">取消</el-button>
        </div>

      </el-dialog>

      <el-dialog title="修改用户" :visible.sync="editVisible" width="50%">
        <el-form class="adde" label-width="180px" ref="editForm" :rules="editRules" :model="editinfo"
          :label-position="labelPosition" style="
   width: 400px
    margin-left: 120px;">
          <div class="addf">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="editinfo.username"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="editinfo.email"></el-input>
            </el-form-item>
            <el-form-item label="角色">
              <el-input v-model="editinfo.role"></el-input>
            </el-form-item>
            <el-form-item label="权限组名称">
              <el-select v-model="editTitle.title" placeholder="请选择活动区域">
                <el-option v-for="item in simpleList" :key="item.id" :label="item.title" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="联系电话">
              <el-input v-model="editinfo.phone"></el-input>
            </el-form-item>
            <el-form-item label="介绍">
              <el-input class="textarea" :rows="2" type="textarea" v-model="editinfo.introduction">
              </el-input>
            </el-form-item>
          </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="Submitedit">立即创建</el-button>
          <el-button @click="editVisible=false">取消</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { list, add, remove, update } from '../../api/base/users.js'
import { simple1 } from '../../api/base/permissions.js'
export default {
  data () {
    // callback() 校验通过 // callback(new Error())校验失败
    const validateEmail = function (rule, value, callback) {
      const reg = /^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*\.[a-z]{2,}$/
      if (reg.test(value)) {
        callback()
      } else {
        callback(new Error('邮箱不符合格式'))
      }
    }
    return {
      labelPosition: 'right',
      loading: true,
      editRules: {
        username: [
          { required: true, message: '输入用户名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { validator: validateEmail, trigger: 'blur' }
        ]
      },

      editVisible: false,
      editinfo: {
        username: '',
        email: '',
        introduction: '',
        permission_group_id: null,
        phone: '',
        role: ''
      },
      editTitle: {
        title: ''
      },
      per: {
        title: ''
      },
      simpleList: [],
      addinfo: {
        id: null,
        username: '',
        email: '',
        introduction: '',
        password: '',
        permission_group_id: null,
        phone: '',
        role: ''
      },
      addVisible: false,
      query: {
        page: 1,
        pagesize: 5,
        username: ''
      },
      count: 0,
      UserList: [],
      editId: null
    }
  },

  created () {
    this.getUserList()
  },

  methods: {
    async Submitedit () {
      this.editinfo.permission_group_id = this.editTitle.title
      this.addinfo.permission_group_id = this.per.title
      this.$refs.editForm.validate(async (bool) => {
        if (!bool) return this.$message.error('表单有误')
        await update(this.editinfo)
        this.editVisible = false
        this.$message.success('修改成功')
        this.getUserList()
      })
    },
    async Submitadd () {
      this.addinfo.permission_group_id = this.per.title
      this.$refs.addForm.validate(async (bool) => {
        if (!bool) return this.$message.error('表单有误')
        await add(this.addinfo)
        this.$message.success('修改成功')
        this.addVisible = false
        this.getUserList()
      })
      this.addinfo = {
        id: null,
        username: '',
        email: '',
        introduction: '',
        password: '',
        permission_group_id: null,
        phone: '',
        role: ''
      }
      this.per.title = ''
    },
    async add () {
      this.addVisible = true
      const { data: res } = await simple1()
      this.simpleList = res
    },
    handleSizeChange (val) {
      this.query.pagesize = val
      this.getUserList()
    },
    handleCurrentChange (val) {
      this.query.page = val
      this.getUserList()
    },
    async del (row) {
      const confirmResult = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch((err) => err)
      console.log(confirmResult)
      if (confirmResult !== 'confirm') {
        return this.$message.info('取消删除')
      }
      await remove(row)
      this.getUserList()
      this.$message.success('成功')
    },
    async edit (row) {
      this.editVisible = true
      const { data: res } = await simple1()
      this.simpleList = res
      this.editinfo.id = row.id
      this.editinfo.username = row.username
      this.editinfo.email = row.email
      this.editinfo.role = row.role
      this.editinfo.phone = row.phone
      this.editinfo.introduction = row.introduction
      this.editinfo.permission_group_id = row.permission_group_id
      console.log(this.editinfo)
      this.editTitle.title = row.permission_group_id
      console.log(row.permission_group_title)
      console.log(this.editTitle.title)
    },
    async getUserList () {
      const { data: res } = await list(this.query)
      this.UserList = res.list
      this.count = res.counts
      if (res.list.length !== 0) {
        this.loading = false
      }
    }
  },
  computed: {
    num () {
      return '共有' + this.count + '条数据'
    }
  }
}
</script>

<style scoped lang='less'>
/deep/ .permission-card {
  margin: 20px 20px;
}
/deep/.el-select--medium {
  float: left !important;
}
.adde {
  margin-left: 100px;
}
</style>
